<template>
  <a-drawer :title="$t('other.processInfo')" placement="right" :visible="visible" @close="closeDraw" class="base-color-details" width="500">
    <div class='blue-line'>{{$t('hangManage.processInfo')}}</div>
    <a-row :gutter="24">
      <a-col :span="12">
        <div>{{$t('basicData.processCode')}}：</div>
        <div>{{detailInfo.code}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('menu.basic:section')}}：</div>
        <div>{{detailInfo.section}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.processNo')}}：</div>
        <div>{{detailInfo.processNo}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.processCodes')}}：</div>
        <div>{{detailInfo.processCode}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.processNames')}}：</div>
        <div>{{detailInfo.name}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.standardTime')}}：</div>
        <div>{{detailInfo.standardSeconds && formatSeconds(detailInfo.standardSeconds)}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.priceYuan')}}：</div>
        <div>{{detailInfo.labourCost}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{t('common.startState')}}：</div>
        <div>{{detailInfo.status ? $t('common.stop'): $t('common.start')}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('common.remark')}}：</div>
        <div class="mb-20">{{detailInfo.remark}}</div>
      </a-col>
    </a-row>
    <div class='blue-line mt-10'>{{ $t('common.createMsg') }}</div>
    <a-row :gutter="24" class="mb-20">
      <a-col :span="12">
        <div>{{t('common.createTime')}}：</div>
        <div>{{formatTime(detailInfo.createTime, 'YYYY-MM-DD HH:mm:ss')}}</div>
      </a-col>
      <a-col :span="12">
        <div>{{ $t('common.founder') }}：</div>
        <div>{{detailInfo.createBy}}</div>
      </a-col>
    </a-row>
    <div class="footer">
      <a-button @click="closeDraw">{{$t('common.cancel')}}</a-button>
    </div>
  </a-drawer>
</template>

<script setup name="processLibraryDetails">
import { ref } from 'vue'
import { formatTime, formatSeconds } from '@/utils'
let detailInfo = ref({})
let visible = ref(false)

const openDraw = (record) => {
  detailInfo.value = record
  visible.value = true
}

const closeDraw = () => {
  visible.value = false
}

defineExpose({
  openDraw
})
</script>